var satelliteLayer
var map
var mainvue = new Vue({
    el : '#main',
    data : {       
        lnglats:[],
        map:"",
        vipshowimg:'images/chickbtn-on.png',
        vipshow:0,
        bengmapshowimg:'images/chickbtn-off.png',
        bengmap:1,
        bengdatashowimg:'images/chickbtn-off.png',
        bengdata:1,
        timeday:'',
        nowbengid:'#markid0',
        timenum:'',
        Jkyulu:'0.94',
        Jkzhuodu:'0.13',
        Jkyali:'134',
        Jkliuliang:'1345',
        Jkleij:'701648',
        JKbnum:'0.1',
        JK1h:'1000',
        JK2h:'1500',
        zhandata:[
        [1,1,1,0],[1,0,1,0],[1,1,1,1],[1,1,1,0],[1,1,1,1],[1,1,1,0],
        [1,0,1,0],[1,1,1,1],[1,0,1,1],[1,1,1,1],[1,0,1,1],[1,1,1,1],        
        [1,1,0,1],[1,1,1,1],[1,0,1,1],[1,0,1,1],[1,1,1,1],[1,0,1,1],
        [1,0,1,1],[1,1,1,0],[1,1,1,1],[1,0,1,1],[1,0,1,1],[1,1,1,1],
        [1,1,1,1],[1,0,1,1],[1,0,1,1],[1,1,1,1],[1,0,1,1],[1,1,0,1],
        [1,0,1,1],[1,1,1,1],[1,0,1,1],[1,1,1,1],[1,0,1,0],[1,1,1,1],
        [1,1,1,1],[1,0,1,1],[1,0,1,1],[1,1,1,1],[1,0,1,1],[1,1,0,1],
        ]
    },
    created : function() {
       // this.init()
        console.log("dddd")
        setTimeout(function(){
           showTime() 
        },1000)
        
        // var str = 'http://www.51hangche.com/testweb/images/famen-on.png'
        // console.log(str.split("famen-"))
    },
    methods : {
        init : function(e) {
          
        }, 
        hideall(){
           $('#container').fadeOut(500)
             $('#leftnav').fadeOut(500)
             $('#mapstyel').fadeOut(500)
             $('#btmtable').fadeOut(500)
             $('#rundata').fadeOut(500)  
             $('#bengrunview').fadeOut(500)  
             $('#qushiview').fadeOut(500)  
             $('#yupanview').fadeOut(500)  
        },
        showqushi(){
          qushiview()  
        },
        zhacentrou(key){
            
            if(key == 1){//
               // console.log($('.key1').css('backgroundImage'))
               // .split("-")
                var str = $('.key1').css('backgroundImage').split("-")[1].split(".")[0]
                if(str == "on"){
                    $('.key1').css('background-image',"url(images/famen-off.png)")
                   
                }else{
                    $('.key1').css('background-image',"url(images/famen-on.png)")
                }
               
            }
            else if(key == 3){//
                var str = $('.key3').css('backgroundImage').split("-")[1].split(".")[0]
                if(str == "on"){
                    $('.key3').css('background-image',"url(images/famen-off.png)")
                    
                }else{
                    $('.key3').css('background-image',"url(images/famen-on.png)")
                }
               
            }
            var str = $('.key').css('backgroundImage').split("-")[1].split(".")[0]
                if(str == "on"){
                    $('.key').css('background-image',"url(images/famen-off.png)")
                   
                }else{
                    $('.key').css('background-image',"url(images/famen-on.png)")
                }
        },
        pagechange(e){
          // console.log(e)  
          if(e==0){//home
           mainvue.hideall()
             $('#container').fadeIn(500)
             $('#leftnav').fadeIn(500)
             $('#mapstyel').fadeIn(500)
             $('#btmtable').fadeIn(500)
              $('.topnavbgimg').css('left',"-0.5rem")
             $('.topnavbgimg').css('width',"5rem")
          }
          else if(e == 1){
            mainvue.hideall()
             $('#rundata').fadeIn(500)
             $('.topnavbgimg').css('left',"7.5rem")
             $('.topnavbgimg').css('width',"8rem")
          }
          else if(e == 2){
              mainvue.hideall()
             $('#qushiview').fadeIn(500)
              qushiview()
              $('.topnavbgimg').css('left',"16.5rem")
             $('.topnavbgimg').css('width',"8rem")
          }
          else if(e == 3){
              
            mainvue.hideall()
             $('#yupanview').fadeIn(500)  
             $('.topnavbgimg').css('left',"25.5rem")
             $('.topnavbgimg').css('width',"8rem")
          }
          else if(e == 4){////工艺图
            
            mainvue.hideall()
            console.log(mainvue.nowbengid)
            $('#bengrunview').fadeIn(500) 
            $('#shuguangbengzhan').hide() 
            $('#zhuliubengzhan').hide() 
            $('#huqiaobengzhan').hide() 
            if(mainvue.nowbengid == '#markid0'){
                $('#shuguangbengzhan').fadeIn(500) 
            }
            if(mainvue.nowbengid == '#markid1'){
                $('#zhuliubengzhan').fadeIn(500) 
            }
            else if(mainvue.nowbengid == '#markid2'){
                $('#huqiaobengzhan').fadeIn(500) 
            }
            else if(mainvue.nowbengid == '#markid3'){
                $('#shuguangbengzhan').fadeIn(500) 
            }
            else if(mainvue.nowbengid == '#markid4'){
                $('#shuguangbengzhan').fadeIn(500) 
            }
            else if(mainvue.nowbengid == '#markid5'){
                $('#zhuliubengzhan').fadeIn(500) 
            }
            else if(mainvue.nowbengid == '#markid6'){
                $('#huqiaobengzhan').fadeIn(500) 
            }
            else if(mainvue.nowbengid == '#markid7'){
                $('#zhuliubengzhan').fadeIn(500) 
            }
            else if(mainvue.nowbengid == '#markid8'){
                $('#huqiaobengzhan').fadeIn(500) 
            }
            else if(mainvue.nowbengid == '#markid9'){
                $('#shuguangbengzhan').fadeIn(500) 
            }
            else if(mainvue.nowbengid == '#markid10'){
                $('#zhuliubengzhan').fadeIn(500) 
            }
          }
        },      
        changedata:function(){  
        },
        operation(e){
          console.log(e)
        },
        vipshowschange(){
            if(mainvue.vipshow==0){
                 mainvue.vipshow = 1
                 mainvue.vipshowimg='images/chickbtn-off.png'
                // console.log(markers.length)
                 map.remove(markers);
            }else{
                mainvue.vipshow = 0
                mainvue.vipshowimg='images/chickbtn-on.png' 
                drawimpotantarea()            
            }
        },
        bengmapshowschange(){
            if(mainvue.bengmap==0){
                 mainvue.bengmap = 1
                 mainvue.bengmapshowimg='images/chickbtn-off.png'
                // $('.marckdata').hide() 
                // hide()
                for(var i=0;i<heatmaparr.length;i++){
                    var obj = heatmaparr[i]
                    obj.hide()
                }
                
            }else{
                mainvue.bengmap = 0
                mainvue.bengmapshowimg='images/chickbtn-on.png'   
                if(heatmaparr.length>0){
                   for(var i=0;i<heatmaparr.length;i++){
                        var obj = heatmaparr[i]
                        obj.show()
                    } 
                }else{                   
                    drawheatmap({a:121.5745200000,b:30.9287100000,r:0.008})
                    drawheatmap({a:121.7355880000,b:30.9199410000,r:0.0021})
                    drawheatmap({a:121.5068550000,b:30.9222070000,r:0.0023})
                    drawheatmap({a:121.5065900000,b:30.9199410000,r:0.0021})
                    drawheatmap({a:121.4590300000,b:30.9029100000,r:0.0025})
                    drawheatmap({a:121.7355880000,b:30.9199410000,r:0.0021})
                    drawheatmap({a:121.4651700000,b:30.9085800000,r:0.0024})
                
                }
                
                //$('.marckdata').show()             
            }
        },
        bengdatashowschange(){
           if(mainvue.bengdata==0){
                 mainvue.bengdata = 1
                 mainvue.bengdatashowimg='images/chickbtn-off.png'
                   $('.marckdata').hide() 
            }else{
                mainvue.bengdata = 0
                mainvue.bengdatashowimg='images/chickbtn-on.png'   
                $('.marckdata').show()             
            }
        },
        showmap:function(){
            $('#linemap').hide() 
            $('#container').fadeIn(500) 
        },
        backnomel(e){
          
           map.setZoom(12)
           map.setCenter([121.5399200000, 30.8900100000])
            $('.marckdata').hide() 
        },
        settype:function(e){
          if(e == 0){
             if(satelliteLayer){
                 satelliteLayer.setMap(null);
             }
              map.setMapStyle("amap://styles/darkblue");
              map.setPitch(45);
          }else if(e == 1){
             if(satelliteLayer == null){
                 satelliteLayer  = new AMap.TileLayer.Satellite();
                map.add(satelliteLayer); 
             }else{
                  satelliteLayer.setMap(map);
             }
             
          }
          else if(e == 2){
               if(satelliteLayer){
                 satelliteLayer.setMap(null);
             }
             map.setMapStyle("amap://styles/normal");
             map.setPitch(15);
          }
        },
       
    //根据屏幕分辨率设置缩放限制，达到缩放限制不显示图例
    clear(){
      if (window.innerWidth>1920) {
         if(this.map.getZoom()<10) {
            this.map.clearMap();
            this.drawPolygons();
          } else {
            this.changedata();
          }
      } else {
          if(this.map.getZoom() < 12) {
            this.map.clearMap();
            this.drawPolygons();
          } else {
            this.changedata()
          }
      }
    },
    
    
    }
})

//////star
var canvas = document.getElementById('starcanvas'),
  ctx = canvas.getContext('2d'),
  w = canvas.width = window.innerWidth,
  h = canvas.height = window.innerHeight,

  hue = 217,
  stars = [],
  count = 0,
  maxStars = 1300;//星星数量

var canvas2 = document.createElement('canvas'),
  ctx2 = canvas2.getContext('2d');
canvas2.width = 100;
canvas2.height = 100;
var half = canvas2.width / 2,
  gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
gradient2.addColorStop(0.025, '#CCC');
gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
gradient2.addColorStop(1, 'transparent');

ctx2.fillStyle = gradient2;
ctx2.beginPath();
ctx2.arc(half, half, half, 0, Math.PI * 2);
ctx2.fill();

// End cache

function random(min, max) {
  if (arguments.length < 2) {
    max = min;
    min = 0;
  }

  if (min > max) {
    var hold = max;
    max = min;
    min = hold;
  }

  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function maxOrbit(x, y) {
  var max = Math.max(x, y),
    diameter = Math.round(Math.sqrt(max * max + max * max));
  return diameter / 2;
  //星星移动范围，值越大范围越小，
}

var Star = function() {

  this.orbitRadius = random(maxOrbit(w, h));
  this.radius = random(60, this.orbitRadius) / 8; 
  //星星大小
  this.orbitX = w / 2;
  this.orbitY = h / 2;
  this.timePassed = random(0, maxStars);
  this.speed = random(this.orbitRadius) / 90000; 
  //星星移动速度
  this.alpha = random(2, 10) / 10;

  count++;
  stars[count] = this;
}

Star.prototype.draw = function() {
  var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
    y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
    twinkle = random(10);

  if (twinkle === 1 && this.alpha > 0) {
    this.alpha -= 0.05;
  } else if (twinkle === 2 && this.alpha < 1) {
    this.alpha += 0.05;
  }

  ctx.globalAlpha = this.alpha;
  ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
  this.timePassed += this.speed;
}

for (var i = 0; i < maxStars; i++) {
  new Star();
}

function animation() {
  ctx.globalCompositeOperation = 'source-over';
  ctx.globalAlpha = 0.5; //尾巴
  ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
  ctx.fillRect(0, 0, w, h)

  ctx.globalCompositeOperation = 'lighter';
  for (var i = 1, l = stars.length; i < l; i++) {
    stars[i].draw();
  };

  window.requestAnimationFrame(animation);
}


/////starend
var zhanpoweranimat = 0///relicunt
function showTime() {
        // To get the date time
        var date = new Date();
        var year = date.getYear() + 1900;
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hour = date.getHours();
        var min = date.getMinutes();
        var sec = date.getSeconds();
        if(sec<10){
            sec = "0"+sec
        }
        if(hour<10){
            hour = "0"+hour
        }
        var date_time =  " " + hour + ":" + min + ":" + sec;
       // console.log(date_time)
        mainvue.timeday = year + "年" + month + "月" + day +"日"
        mainvue.timenum = " " + hour + ":" + min + ":" + sec;
        setTimeout(function(){
           showTime() 
        },1000)
        setchangedata()
        if(mainvue.bengmap == 0){
            
            if(zhanpoweranimat == 2){
                dozhanpoweranimat()
                zhanpoweranimat = 0
            }else{
                zhanpoweranimat++
            }
            
        }else{
            zhanpoweranimat = 0
        }
    } 
function dozhanpoweranimat(){
    for(var i=0;i<heatmaparr.length;i++){
       var heatmap = heatmaparr[i]
       var heatmapOpt = heatmapOptarr[i]
        heatmapOpt['3d'].heightBezier = setquxian();
        heatmap.setOptions(heatmapOpt);          
    } 
}
var anmitarr=[0.1,0.1,0.1,0.1]
function setquxian(){
    // for(var i=0;i<4;i++){
        // if(anmitarr[i]){
//             
        // }
//         
    // }
    var key1 = 0.03,
        key2 = 0.03,
        key3 = 0.03,
        key4 = 0.03 
    if(anmitarr[3]<-1.1){
        
        key4 = 0.03
    }else if(anmitarr[3]>1.1){
       
        key4 = -0.03
    }
    anmitarr[3]+=key4
    
    
    if(anmitarr[0]<-1.1){
       
        key1 = 0.03
    }else if(anmitarr[3]>1.1){
       
        key1 = -0.03
    }
    anmitarr[0]+=key1
    
    
    if(anmitarr[2]<-1.1){
       
        key3 = 0.03
    }else if(anmitarr[2]>1.1){
        
        key3 = -0.03
    }
    anmitarr[2]+=key3 
   
    
    if(anmitarr[1]<-1.1){
       
        key2 = 0.03
    }else if(anmitarr[1]>1.1){
        
        key2 = -0.03
    }
        anmitarr[1]+=key2
    
    console.log(anmitarr)
    return anmitarr
}
function setchangedata(){
    // console.log($("#bengrunview").css('display'))
    if($("#bengrunview").css('display')=='block'){
       // var key = parseInt(Math.round(Math.random()*2))
        mainvue.Jkyulu = parseInt(parseInt(Math.random()*2))*0.1;
        mainvue.Jkzhuodu = parseInt(parseInt(Math.random()*2))*0.1;
        mainvue.Jkyali = parseInt(Math.round(Math.random()*2))*50;
        mainvue.Jkliuliang = parseInt(Math.round(Math.random()*2))*100;
        mainvue.Jkleij = parseInt(Math.round(Math.random()*2))*3000;
        mainvue.JK1h = parseInt(Math.round(Math.random()*2))*3000;
        mainvue.JK2h = parseInt(Math.round(Math.random()*2))*3000;
        mainvue.JKbnum = parseInt(parseInt(Math.random()*2))*0.1;
        // Jkyulu:'0.94',
        // Jkzhuodu:'0.13',
        // Jkyali:'134',
        // Jkliuliang:'1345',
        // Jkleij:'701648',
        // JK1h:1000,
        // JK2h:1500,
    }
}
//// 雷达图
function initleidabar(){
    var objHtml = document.getElementById('leidadraw');
    objHtml.style.width = objHtml.parentElement.offsetWidth + "px";
    objHtml.style.height = objHtml.parentElement.offsetHeight + "px";
    var totalScoreCount = echarts.init(objHtml);
   var color = ['#e9df3d', '#f79c19', '#21fcd6', '#08c8ff'];
    var data = [{
            "name": "泵站电基",
            "value": 20
        },
        {
            "name": "浊度",
            "value": 30
        },
        {
            "name": "余氯",
            "value": 22
        },
        {
            "name": "压力",
            "value": 50
        }
    ];
    
    var max = data[0].value;
    data.forEach(function(d) {
        max = d.value > max ? d.value : max;
    });
    
    var renderData = [{
        value: [],
        name: "数据表",
        symbol: 'none',
        lineStyle: {
            normal: {
                color: '#ecc03e',///雷达区域面积边界颜色
                width: 1
            }
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0,
                    [{
                        offset: 0,
                        color: 'rgba(203, 158, 24, 0.8)'
                    }, {
                        offset: 1,
                        color: 'rgba(190, 96, 20, 0.8)'
                    }],
                    false)
            }
        }
    }];
    
    
    data.forEach(function(d, i) {
        var value = ['', '', '', '', ''];
        value[i] = max,
        renderData[0].value[i] = d.value;
        renderData.push({////原点
            value: value,
            symbol: 'circle',
            symbolSize: 5,
            lineStyle: {
                normal: {
                    color: 'transparent'
                }
            },
            itemStyle: {
                normal: {
                    color: color[i],
                }
            }
        })
    })
    var indicator = [];
    
    data.forEach(function(d) {
        indicator.push({
            name: d.name,
            max: max,
            color: '#fff'
        })
    })
    
    
    option = {
        backgroundColor: '',
        tooltip: {
            show: true,
            trigger: "item"
        },
        radar: {
            center: ["50%", "50%"],
            nameGap:10,
            radius: "70%",
            startAngle: 75, // 起始角度
            splitNumber: 4,
           // shape: "circle",
            splitArea: {
                areaStyle: {
                    color: 'transparent'
                }
            },
            axisLabel: {
                show: false,
                fontSize: 20,
                color: "#000",
                fontStyle: "normal",
                fontWeight: "normal"
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#1ca5e0"////雷达网状颜色
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: "#1ca5e0"////雷达网状颜色
                }
            },
            indicator: indicator
        },
        series: [{
            type: "radar",
            data: renderData
        }]
    }
    totalScoreCount.setOption(option);
} 
//// 进度条
function inittotalbar(key,numb){
    var objHtml = document.getElementById(key);
    objHtml.style.width = objHtml.parentElement.offsetWidth + "px";
    objHtml.style.height = objHtml.parentElement.offsetHeight*0.2 + "px";
    var totalScoreCount = echarts.init(objHtml);
    var begincolor,
        endcolor
    
    if(key=="totalbar1"){
        begincolor = "#1fe5fd"
        endcolor = "#1344fa"
    }else{
        begincolor = "#fff045"
        endcolor = "#ff6b11"
    }
    let positionLeft = 1,
        max = 100 + 2*positionLeft,
        value = numb;
    option = {
                backgroundColor: '', //背景必须与symbal颜色一样
                "grid": {
                    "top": "20%",
                    "left": "8%",
                    "bottom": "5%",
                    "right": "6%",
                    // "containLabel": true
                },
                "xAxis": {
                    type: 'value',
                    "max": max,
                    "splitLine": {
                        "show": false
                    },
                    "axisLine": {
                        "show": false
                    },
                    "axisLabel": {
                        "show": false
                    },
                    "axisTick": {
                        "show": false
                    }
                },
                "yAxis": {
                    "type": "category",
                    "inverse": false,
                    "data": [],
                    "axisLine": {
                        "show": false
                    },
                    "axisTick": {
                        "show": false
                    },
                    "axisLabel": {
                        "show": false
                    }
                },
                "series": [
            
                    { //间距  进度条
                        type: 'bar',
                        barWidth: 13,
                        stack: 'b',
                        legendHoverLink: false,
                        itemStyle: {
                            normal: {
                                color: 'rgba(0,0,0,0)'
                            }
                        },
            
                        data: [positionLeft]
                    },
            
            
                    { //内    文本
                        type: 'bar',
                        barWidth: 20,
                        stack: 'b',
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                textStyle: {
                                    color: '#fff'
                                },
                                formatter: function(e) {
                                    return (e.value / (max - 2*positionLeft) * 100).toFixed(2) + "%"
                                }
                            }
                        },
                        legendHoverLink: false,
                        silent: true,
                        itemStyle: {
                            normal: {
                                barBorderRadius: 5,
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 1, 0, [{
                                            offset: 0,
                                            color: begincolor
                                        },
                                        {
                                            offset: 1,
                                            color: endcolor
                                        }
                                    ]
                                )
                            }
                        },
            
                        data: [value]
                    },
                    { //框 进度条框
                        type: 'bar',
                        barWidth: 16,
                        barGap: '-110%',///垂直位移
                        label: {
                            normal: {
                                show: false,
            
                                position: 'right',
                                textStyle: {
                                    color: '#000'
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                barBorderRadius: 13,
                                color: 'rgba(0,0,0,0)', //底色
                                borderWidth: 2,
                                borderColor: 'grey'
                            }
                        },
                        data: [max],
                        z: 1,
                    }
                ]
    };
    totalScoreCount.setOption(option);
}
////
function initpowerline(){
    var objHtml = document.getElementById("powerline");
    objHtml.style.width = objHtml.parentElement.offsetWidth + "px";
    objHtml.style.height = objHtml.parentElement.offsetHeight + "px";
    var totalScoreCount = echarts.init(objHtml);
    // option = {
    // backgroundColor: '',
    // "grid": {
        // "top": "28%",
        // "left": "8%",
        // "bottom": "5%",
        // "right": "8%",
        // "containLabel": true
    // },
    // "xAxis": [{
        // "type": "category",
        // "data": ["青村", "光明", "华亭", "泰日", "平安", "育秀", "化工区", "胡桥", "金汇", "钱桥", "姚家巷", "曙光"],////x坐标值
        // "axisTick": {
            // "alignWithLabel": true
        // },
        // "nameTextStyle": {
            // "color": "#8d919b"
        // },
        // "axisLine": {
            // "lineStyle": {
                // "color": "#8d919b"
            // },
//             
        // },
        // "axisLabel": {
            // "textStyle": {
                // "color": "#ffffff"
            // },
            // "rotate":45,//倾斜度 
        // }
    // }],
    // "yAxis": [{
        // "type": "value",
        // "axisLabel": {
            // "textStyle": {
                // "color": "#ffffff"
            // },
            // "formatter": "{value}%"
        // },
        // "splitLine": {
            // "lineStyle": {
                // "color": "#8d919b"
            // }
        // },
        // "axisLine": {
            // "show": false
        // }
    // }],
    // "series": [{
            // "name": "",
            // type: 'pictorialBar',
            // symbolSize: [15, 8],/////尺寸
            // symbolOffset: [0, -5],
            // symbolPosition: 'end',/////顶部圆饼数值
            // z: 12,
            // //"barWidth": "20",
            // "label": {
                // "normal": {
                    // "show": true,
                    // "position": "top",
                    // "formatter": "{c}%"
                // }
            // },
            // "data": [{
                // "value": 100,
                // "itemStyle": {
                    // "color": "#59cb42"
                // }
            // }, {
                // "value": 55,
                // "itemStyle": {
                    // "color": "#3cefff"
                // }
            // }
            // , {
                // "value": 52,
                // "itemStyle": {
                    // "color": "#59cb42"
                // }
            // }
            // , {
                // "value": 72,
                // "itemStyle": {
                    // "color": "#3cefff"
                // }
            // }
            // , {
                // "value": 45,
                // "itemStyle": {
                    // "color": "#59cb42"
                // }
            // }, {
                // "value": 55,
                // "itemStyle": {
                    // "color": "#3cefff"
                // }
            // }
            // , {
                // "value": 52,
                // "itemStyle": {
                    // "color": "#59cb42"
                // }
            // }
            // , {
                // "value": 72,
                // "itemStyle": {
                    // "color": "#3cefff"
                // }
            // }
            // , {
                // "value": 45,
                // "itemStyle": {
                    // "color": "#59cb42"
                // }
            // }, {
                // "value": 72,
                // "itemStyle": {
                    // "color": "#3cefff"
                // }
            // }
            // , {
                // "value": 45,
                // "itemStyle": {
                    // "color": "#59cb42"
                // }
            // },{
                // "value": 45,
                // "itemStyle": {
                    // "color": "#3cefff"
                // }
            // }]
        // },
        // {
            // name: '',
            // type: 'pictorialBar',
            // symbolSize: [15, 8],
            // symbolOffset: [0, 5],///冰柱底部
            // // "barWidth": "20",
            // z: 12,
            // "data": [{
                // "value": 100,
                // "itemStyle": {
                    // "color": "#59cb42"
                // }
            // },  {
                // "value": 55,
                // "itemStyle": {
                    // "color": "#3cefff"
                // }
            // }
            // , {
                // "value": 52,
                // "itemStyle": {
                    // "color": "#59cb42"
                // }
            // }
            // , {
                // "value": 72,
                // "itemStyle": {
                    // "color": "#3cefff"
                // }
            // }
            // , {
                // "value": 45,
                // "itemStyle": {
                    // "color": "#59cb42"
                // }
            // },  {
                // "value": 55,
                // "itemStyle": {
                    // "color": "#3cefff"
                // }
            // }
            // , {
                // "value": 52,
                // "itemStyle": {
                    // "color": "#59cb42"
                // }
            // }
            // , {
                // "value": 72,
                // "itemStyle": {
                    // "color": "#3cefff"
                // }
            // }
            // , {
                // "value": 45,
                // "itemStyle": {
                    // "color": "#59cb42"
                // }
            // }, {
                // "value": 52,
                // "itemStyle": {
                    // "color": "#3cefff"
                // }
            // }
            // , {
                // "value": 72,
                // "itemStyle": {
                    // "color": "#59cb42"
                // }
            // }, {
                // "value": 45,
                // "itemStyle": {
                    // "color": "#3cefff"
                // }
            // }
            // ]
        // },
        // {
            // name: '',
            // type: 'pictorialBar',//////底部外圆环
            // symbolSize: [20, 10],
            // symbolOffset: [0, 10],
            // z: 10,
            // itemStyle: {
                // normal: {
                    // color: 'transparent',
                    // borderColor: '#14b1eb',
                    // borderType: 'dashed',
                    // borderWidth: 5
                // }
            // },
            // data: [100,55,52,72,45,55,52,72,45,72,45,45]
        // },
        // {
            // type: 'bar',//////圆柱图
            // itemStyle: {
                // normal: {
                    // //color: '#14b1eb',
                    // opacity: .7
                // }
            // },
            // //silent: true,
            // "barWidth": "15",
            // //barGap: '-100%', // Make series be overlap
            // "data": [{
                // "value": 100,
                // "itemStyle": {
                    // "color": "#59cb42"
                // }
            // }, {
                // "value": 55,
                // "itemStyle": {
                    // "color": "#3cefff"
                // }
            // }
            // , {
                // "value": 52,
                // "itemStyle": {
                    // "color": "#59cb42"
                // }
            // }
            // , {
                // "value": 72,
                // "itemStyle": {
                    // "color": "#3cefff"
                // }
            // }
            // , {
                // "value": 45,
                // "itemStyle": {
                    // "color": "#59cb42"
                // }
            // }, {
                // "value": 55,
                // "itemStyle": {
                    // "color": "#3cefff"
                // }
            // }
            // , {
                // "value": 52,
                // "itemStyle": {
                    // "color": "#59cb42"
                // }
            // }
            // , {
                // "value": 72,
                // "itemStyle": {
                    // "color": "#3cefff"
                // }
            // }
            // , {
                // "value": 45,
                // "itemStyle": {
                    // "color": "#59cb42"
                // }
            // }, {
                // "value": 72,
                // "itemStyle": {
                    // "color": "#3cefff"
                // }
            // }
            // , {
                // "value": 45,
                // "itemStyle": {
                    // "color": "#59cb42"
                // }
            // }, {
                // "value": 45,
                // "itemStyle": {
                    // "color": "#3cefff"
                // }
            // }
            // ],
            // markLine:{
                        // symbol:'none',
                        // label:{
                            // position:"middle",
                            // formatter:'{b}'
                        // },
                        // data:[{
                            // name:"目标值",
                            // yAxis: 80,//res.targetTwo,
                            // lineStyle:{
                                // color:"#eecb5f"
                            // },
                        // }]
                    // }
// 
        // }
// 
// 
    // ]
    // }
var xData = ["青村", "光明", "华亭", "泰日", "平安", "育秀", "化工区", "胡桥", "金汇", "钱桥", "姚家巷", "曙光"];
var yData = [80,87,51,81,23,45,33,51,81,23,87,51];
option = {
    backgroundColor: "",
    color: ['#3398DB'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'line',
            lineStyle: {
                opacity: 0
            }
        },
        formatter: function(prams) {
            return "办理数：" + prams[0].data
        }
    },
    grid: {
        left: '5%',
        right: '0%',
        bottom: '0%',
        top: '5%',
        height: '85%',
        containLabel: true,
        z: 22
    },
    xAxis: [{
        type: 'category',
        gridIndex: 0,
        data: xData,
        axisTick: {
            alignWithLabel: true
        },
        axisLine: {
            lineStyle: {
                color: '#0c3b71'
            }
        },
        axisLabel: {
            show: true,
            color: 'rgb(170,170,170)',
            fontSize: 12,
            "textStyle": {
                "color": "#ffffff"
            },
            "rotate":45,//倾斜度 
        }
       
    }],
    yAxis: [{
            type: 'value',
            gridIndex: 0,
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#0c3b71'
                }
            },
            axisLabel: {
                color: 'rgb(170,170,170)',
                formatter: '{value}'
            }
        },
        {
            type: 'value',
            gridIndex: 0,
            splitNumber: 12,
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
                }
            }
        }
    ],
    series: [{
            name: '办理数',
            type: 'bar',
            barWidth: '30%',
            xAxisIndex: 0,
            yAxisIndex: 0,
            label: {
                normal: {
                    show: true,
                    position: "top",
                    textStyle: {
                        color: "#ffc72b",
                        fontSize: 20
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1, [{
                                offset: 0,
                                color: '#00feff'
                            },
                            {
                                offset: 0.5,
                                color: '#027eff'
                            },
                            {
                                offset: 1,
                                color: '#0286ff'
                            }
                        ]
                    )
                }
            },
            data: yData,
            zlevel: 11

        },
        {
            name: '背景',
            type: 'bar',
            barWidth: '50%',
            xAxisIndex: 0,
            yAxisIndex: 1,
            barGap: '-135%',
            data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
            itemStyle: {
                normal: {
                    color: 'rgba(255,255,255,0.1)'
                }
            },
            zlevel: 9
        },

    ]
};
    totalScoreCount.setOption(option);
}
//////泵站极值曲线1
function drawbengzhanline1(){
    var objHtml = document.getElementById('bengzhaninforline1');
     var screenw = $(window).width()
     var screenh = $(window).height()
     objHtml.style.width = screenw*0.8*0.7*0.6 + "px";
     objHtml.style.height = screenh*0.32 + "px";
    var totalScoreCount = echarts.init(objHtml);
     option = {
    backgroundColor: '',
    title: {
        text: '进水口水质检测',
        textStyle: {
            fontWeight: 'bold',
            fontSize: 14,
            color: '#5f85e7'
        },
        left: '6%',
        top:'5%'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            lineStyle: {
                color: '#57617B'
            }
        }
    },
    legend: {
        icon: 'rect',
        itemWidth: 14,
        itemHeight: 5,
        itemGap: 13,
        data: ['浊度', 'PH', '余氯','水温','流速'],
        right: '10%',
        top:'5%',
        textStyle: {
            fontSize: 12,
            color: '#F1F1F3'
        }
    },
    grid: {
        left: '5%',
        right: '10%',
        bottom: '0',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        boundaryGap: false,
        axisLine: {
            lineStyle: {
                color: '#57617B'
            }
        },
        data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
    }, {
        axisPointer: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#57617B'
            }
        },
        axisTick: {
            show: false
        },

        position: 'bottom',
        offset: 20,
        // data: ['', '', '', '', '', '', '', '', '', '', {
            // value: '周六',
            // textStyle: {
                // align: 'left'
            // }
        // }, '周日']  
        }],
    yAxis: [{
        type: 'value',
        name: '数值',
        axisTick: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#57617B'
            },
             show: false
        },
        axisLabel: {
            margin: 10,
            textStyle: {
                fontSize: 14
            },
            show: true
        },
        splitLine: {
            lineStyle: {
                color: '#57617B'
            },
           
        }
    }],
    series: [{
        name: '浊度',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
            normal: {
                width: 1
            }
        },
        itemStyle: {
            normal: {
                color: 'rgb(137,189,27)',
                borderColor: 'rgba(137,189,2,0.27)',
                borderWidth: 12

            }
        },
        data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
    }, {
        name: 'PH',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
            normal: {
                width: 1
            }
        },
        itemStyle: {
            normal: {
                color: 'rgb(0,136,212)',
                borderColor: 'rgba(0,136,212,0.2)',
                borderWidth: 12

            }
        },
        data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
    }, {
        name: '余氯',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
            normal: {
                width: 1
            }
        },       
        itemStyle: {
            normal: {

                color: 'rgb(219,50,51)',
                borderColor: 'rgba(219,50,51,0.2)',
                borderWidth: 12
            }
        },
        data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
    }, {
        name: '水温',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
            normal: {
                width: 1
            }
        },       
        itemStyle: {
            normal: {

                color: '#07cee6',
                borderColor: 'rgba(219,50,51,0.2)',
                borderWidth: 12
            }
        },
        data: [50, 60, 40, 80, 70, 50, 60, 80, 120, 80, 40, 50]
    },{
        name: '流速',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
            normal: {
                width: 1
            }
        },       
        itemStyle: {
            normal: {

                color: '#d76b2a',
                borderColor: 'rgba(219,50,51,0.2)',
                borderWidth: 12
            }
        },
        data: [90, 100, 140, 80, 50, 30, 100, 80, 60, 40, 80, 30]
    }]
}; 
    totalScoreCount.setOption(option);
}
//////泵站极值曲线2
function drawbengzhanline2(){
    var objHtml = document.getElementById('bengzhaninforline2');
     var screenw = $(window).width()
     var screenh = $(window).height()
     objHtml.style.width = screenw*0.8*0.7*0.6 + "px";
     objHtml.style.height = screenh*0.32 + "px";
    var totalScoreCount = echarts.init(objHtml);
     option = {
    backgroundColor: '',
    title: {
        text: '出水口水质检测',
        textStyle: {
            fontWeight: 'bold',
            fontSize: 14,
            color: '#5f85e7'
        },
        left: '6%',
        top:'5%'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            lineStyle: {
                color: '#57617B'
            }
        }
    },
    legend: {
        icon: 'rect',
        itemWidth: 14,
        itemHeight: 5,
        itemGap: 13,
        data: ['浊度', 'PH', '余氯','水温','流速'],
        right: '10%',
        top:'5%',
        textStyle: {
            fontSize: 12,
            color: '#F1F1F3'
        }
    },
    grid: {
        left: '5%',
        right: '10%',
        bottom: '0',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        boundaryGap: false,
        axisLine: {
            lineStyle: {
                color: '#57617B'
            }
        },
        data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
    }, {
        axisPointer: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#57617B'
            }
        },
        axisTick: {
            show: false
        },

        position: 'bottom',
        offset: 20,
        // data: ['', '', '', '', '', '', '', '', '', '', {
            // value: '周六',
            // textStyle: {
                // align: 'left'
            // }
        // }, '周日']  
        }],
    yAxis: [{
        type: 'value',
        name: '数值',
        axisTick: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#57617B'
            },
             show: false
        },
        axisLabel: {
            margin: 10,
            textStyle: {
                fontSize: 14
            },
            show: true
        },
        splitLine: {
            lineStyle: {
                color: '#57617B'
            },
           
        }
    }],
    series: [{
        name: '浊度',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
            normal: {
                width: 1
            }
        },
        itemStyle: {
            normal: {
                color: 'rgb(137,189,27)',
                borderColor: 'rgba(137,189,2,0.27)',
                borderWidth: 12

            }
        },
        data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
    }, {
        name: 'PH',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
            normal: {
                width: 1
            }
        },
        itemStyle: {
            normal: {
                color: 'rgb(0,136,212)',
                borderColor: 'rgba(0,136,212,0.2)',
                borderWidth: 12

            }
        },
        data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
    }, {
        name: '余氯',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
            normal: {
                width: 1
            }
        },       
        itemStyle: {
            normal: {

                color: 'rgb(219,50,51)',
                borderColor: 'rgba(219,50,51,0.2)',
                borderWidth: 12
            }
        },
        data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
    }, {
        name: '水温',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
            normal: {
                width: 1
            }
        },       
        itemStyle: {
            normal: {

                color: '#07cee6',
                borderColor: 'rgba(219,50,51,0.2)',
                borderWidth: 12
            }
        },
        data: [50, 60, 40, 80, 70, 50, 60, 80, 120, 80, 40, 50]
    },{
        name: '流速',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
            normal: {
                width: 1
            }
        },       
        itemStyle: {
            normal: {

                color: '#d76b2a',
                borderColor: 'rgba(219,50,51,0.2)',
                borderWidth: 12
            }
        },
        data: [90, 100, 140, 80, 50, 30, 100, 80, 60, 40, 80, 30]
    }]
}; 
    totalScoreCount.setOption(option);
}
//////泵站流量值曲线
function drawbengliuliangline(){
    var objHtml = document.getElementById('liuliangline');
     var screenw = $(window).width()
     var screenh = $(window).height()
     objHtml.style.width = screenw*0.8*0.7*0.5 + "px";
     objHtml.style.height = screenh*0.25 + "px";
    var totalScoreCount = echarts.init(objHtml);
     option = {
    backgroundColor: '',
    title: {
        text: '流量',
        textStyle: {
            fontWeight: 'bold',
            fontSize: 14,
            color: '#5f85e7'
        },
        left: '6%',
        top:'5%'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            lineStyle: {
                color: '#57617B'
            }
        }
    },
    legend: {
        icon: 'rect',
        itemWidth: 14,
        itemHeight: 5,
        itemGap: 13,
        data: ['流量'],
        right: '10%',
        top:'5%',
        textStyle: {
            fontSize: 12,
            color: '#F1F1F3'
        }
    },
    grid: {
        left: '5%',
        right: '10%',
        bottom: '0',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        boundaryGap: false,
        axisLine: {
            lineStyle: {
                color: '#57617B'
            }
        },
        data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
    }, {
        axisPointer: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#57617B'
            }
        },
        axisTick: {
            show: false
        },

        position: 'bottom',
        offset: 20,
        // data: ['', '', '', '', '', '', '', '', '', '', {
            // value: '周六',
            // textStyle: {
                // align: 'left'
            // }
        // }, '周日']  
        }],
    yAxis: [{
        type: 'value',
        name: '数值',
        axisTick: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#57617B'
            },
             show: false
        },
        axisLabel: {
            margin: 10,
            textStyle: {
                fontSize: 14
            },
            show: true
        },
        splitLine: {
            lineStyle: {
                color: '#57617B'
            },
           
        }
    }],
    series: [{
        name: '流量',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
            normal: {
                width: 1
            }
        },
        itemStyle: {
            normal: {
                color: 'rgb(137,189,27)',
                borderColor: 'rgba(137,189,2,0.27)',
                borderWidth: 12

            }
        },
        data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
    }, ]
}; 
    totalScoreCount.setOption(option);
}
var map
//////泵站流量值曲线
function drawbengyaliline(){
    var objHtml = document.getElementById('yaliline');
     var screenw = $(window).width()
     var screenh = $(window).height()
     objHtml.style.width = screenw*0.8*0.7*0.5 + "px";
     objHtml.style.height = screenh*0.25 + "px";
    var totalScoreCount = echarts.init(objHtml);
     option = {
    backgroundColor: '',
    title: {
        text: '压力',
        textStyle: {
            fontWeight: 'bold',
            fontSize: 14,
            color: '#5f85e7'
        },
        left: '6%',
        top:'5%'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            lineStyle: {
                color: '#57617B'
            }
        }
    },
    legend: {
        icon: 'rect',
        itemWidth: 14,
        itemHeight: 5,
        itemGap: 13,
        data: ['压力'],
        right: '10%',
        top:'5%',
        textStyle: {
            fontSize: 12,
            color: '#F1F1F3'
        }
    },
    grid: {
        left: '5%',
        right: '10%',
        bottom: '0',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        boundaryGap: false,
        axisLine: {
            lineStyle: {
                color: '#57617B'
            }
        },
        data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
    }, {
        axisPointer: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#57617B'
            }
        },
        axisTick: {
            show: false
        },

        position: 'bottom',
        offset: 20,
        // data: ['', '', '', '', '', '', '', '', '', '', {
            // value: '周六',
            // textStyle: {
                // align: 'left'
            // }
        // }, '周日']  
        }],
    yAxis: [{
        type: 'value',
        name: '数值',
        axisTick: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#57617B'
            },
             show: false
        },
        axisLabel: {
            margin: 10,
            textStyle: {
                fontSize: 14
            },
            show: true
        },
        splitLine: {
            lineStyle: {
                color: '#57617B'
            },
           
        }
    }],
    series: [{
        name: '压力',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
            normal: {
                width: 1
            }
        },
        itemStyle: {
            normal: {
                color: '#e8b914',
                borderColor: 'rgba(137,189,2,0.27)',
                borderWidth: 12

            }
        },
        data: [120, 132, 141, 164, 120, 150, 170, 115, 115, 142, 115, 162]
    }, ]
}; 
    totalScoreCount.setOption(option);
}
/////供水范围
// console.log($(window).width()+'px'))
// $('#linemap').css('width',($(window).width()+'px'))
$('#linemap').css('height',(($(window).height()-60)+'px'))




// 基于准备好的dom，初始化echarts实例
    var mapBoxEchart = echarts.init(document.getElementById('linemap'));
    var geoCoordMap = { //可以在地图上显示的城市的坐标信息
        '集控中心':[121.656518,30.969599],
        '泵站1':[121.656518,30.979599],
        '泵站2':[121.460137,30.950159]
    };
    var HFData = [ // 数据中name的城市名称必须与geoCoordMap中城市名称一致, 不然关联不上，合肥到各地区的线路
        [{name: '集控中心'}, {name: '泵站1',value: 66}],
        [{name: '集控中心'}, {name: '泵站2',value: 66}]
    ];
    var planePath = 'arrow'; // 箭头的svg
    // push进去线路开始-结束地点-经纬度
    var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var fromCoord = geoCoordMap[dataItem[0].name];
            var toCoord = geoCoordMap[dataItem[1].name];
            if (fromCoord && toCoord) {
                res.push([{
                    coord: fromCoord
                }, {
                    coord: toCoord
                }]);
            }
        }
        return res;
    };
    var color = ['#fff', '#FFFFA8', '#46bee9']; //圆圈和字的颜色，线的颜色，箭头颜色
    // 数据
    var series = [];
    // 遍历由到其他城市的线路
    [
        ['集控中心', HFData]
    ].forEach(function(item, i) {
        console.log(item)
        // 配置
        series.push({
            // 系列名称，用于tooltip的显示
            name: item[0],
            type: 'lines',
            zlevel: 1, // 用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中
            // effect出发到目的地 的白色尾巴线条
            // 线特效的配置
            effect: {
                show: true,
                period: 6, // 特效动画的时间，单位为 s
                trailLength: 0.1, // 特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长
                color: '#46bee9', // 移动箭头颜色
                symbol: planePath,
                symbolSize: 6 // 特效标记的大小
            },
            // lineStyle出发到目的地 的线条颜色
            lineStyle: {
                normal: {
                    color: color[i],
                    width: 0,
                    curveness: 0.2 //幅度
                }
            },
            data: convertData(item[1]) //开始到结束数据
        }, {
            //出发地信息
            name: item[0],
            type: 'lines',
            zlevel: 2,
            effect: {
                show: true,
                period: 6,
                trailLength: 0,
                symbol: planePath,
                symbolSize: 6
            },
            lineStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#FFFFA8' // 出发
                    }, {
                        offset: 1,
                        color: '#58B3CC ' // 结束 颜色
                    }], false),
                    width: 1.5,
                    opacity: 0.4,
                    curveness: 0.2
                }
            },
            data: convertData(item[1])
        }, {
            // 目的地信息
            name: item[0],
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
                brushType: 'stroke'
            },
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    formatter: '{b}'
                }
            },
            symbolSize: function(val) {
                return val[2] / 8;
            },
            itemStyle: {
                normal: {
                    color: color[i]
                }
            },
            data: item[1].map(function(dataItem) {
                return {
                    name: dataItem[1].name,
                    value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                };
            })
        });
    });

    // 指定相关的配置项和数据
    var mapBoxOption = {
        geo: {
            map: 'fengxian',
            roam: false, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            aspectScale: 0.75,
            zoom: 1.20,
            label: {
                normal: {
                    show: false,
                    textStyle: {
                        color: '#00a0c9'
                    }
                },
                emphasis: { // 对应的鼠标悬浮效果
                    show: false,
                    textStyle: {
                        color: "#00a0c9"
                    }
                }
            },
            itemStyle: {
                normal: {
                    areaColor: '#0083ce',
                    borderColor: '#0066ba'
                },
                emphasis: {
                    borderWidth: 0,
                    borderColor: '#0066ba',
                    areaColor: "#0494e1",
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        },
        series: series
    };
    // 使用制定的配置项和数据显示图表
    mapBoxEchart.setOption(mapBoxOption);
    // echart图表自适应
    window.addEventListener("resize", function() {
        mapBoxEchart.resize();
    });


////// initmap
// map = new AMap.Map('container', {
           // resizeEnable: true,
            // viewMode: '3D',
            // pitch: 45,
            // center: [121.5399200000, 30.8900100000],
           // zoom:12,
          // // showLabel: false,
        // });
// mainvue.map = map
 // var styleName = "amap://styles/darkblue"
     // map.setMapStyle(styleName);
 // // 设置光照
    // map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.5);
    // map.DirectionLight = new AMap.Lights.DirectionLight([0, 0, 1], [1, 1, 1], 1);
// 
    // var object3Dlayer = new AMap.Object3DLayer();
    // map.add(object3Dlayer);
// 
    // new AMap.DistrictSearch({
        // subdistrict: 0,   //返回下一级行政区
        // extensions: 'all',  //返回行政区边界坐标组等具体信息
        // level: 'city'  //查询行政级别为 市
    // }).search('奉贤区', function (status, result) {
        // var bounds = result.districtList[0].boundaries;
        // var height = 5000;
        // var color = '#002779a7'; // rgba
        // var prism = new AMap.Object3D.Prism({
            // path: bounds,
            // height: height,
            // color: color
        // });
// 
        // prism.transparent = true;
        // object3Dlayer.add(prism);
        // var text = new AMap.Text({
            // text: result.districtList[0].name + '',///////' + result.districtList[0].adcode + 
            // verticalAlign: 'bottom',
            // position: [121.559598, 30.848978],
            // height: 5000,
            // style: {
                // 'background-color': 'transparent',
                // '-webkit-text-stroke': '#82bed5',
                // '-webkit-text-stroke-width': '0.5px',
                // 'text-align': 'center',
                // 'border': 'none',
                // 'color': '#f2f9fb',
                // 'font-size': '18px',
                // 'font-weight': 600
            // }
        // });
// 
        // text.setMap(map);
//        
    // });
    
      var opts = {
        subdistrict: 0,
        extensions: 'all',
        level: 'city'
    };
    //利用行政区查询获取边界构建mask路径
    //也可以直接通过经纬度构建mask路径
    var district = new AMap.DistrictSearch(opts);
    district.search('奉贤区', function(status, result) {
        var bounds = result.districtList[0].boundaries;
        var mask = []
        for(var i =0;i<bounds.length;i+=1){
            mask.push([bounds[i]])
        }
      
        map = new AMap.Map('container', {
            mask:mask,
            center:[121.5189200000, 30.8800100000],
            disableSocket:true,
            viewMode:'3D',
          //  showLabel:false,
            labelzIndex:130,
            pitch:45,
            zoom:12,
            layers:[
              //  new AMap.TileLayer.RoadNet({
                   // rejectMapMask:true
             //   }),
              //  new AMap.TileLayer.Satellite()
            ]
        });
    mainvue.map = map
    var styleName = "amap://styles/darkblue"
     map.setMapStyle(styleName);
        var maskerIn = new AMap.Marker({
            position:[116.501415,39.926055],
            map:map
        })
        var maskerOut = new AMap.Marker({//区域外的不会显示
            position:[117.001415,39.926055],
            map:map
        })
        //添加高度面
        var object3Dlayer = new AMap.Object3DLayer({zIndex:1});
        map.add(object3Dlayer)
        var height = -8000;
        var color = '#0088ffcc';//rgba
        var wall = new AMap.Object3D.Wall({
            path:bounds,
            height:height,
            color:color
        });
       wall.transparent = true
        object3Dlayer.add(wall)
        //添加描边
        for(var i =0;i<bounds.length;i+=1){
            new AMap.Polyline({
                path:bounds[i],
                strokeColor:'#99ffff',
                strokeWeight:4,
                map:map
            })
        }
        drawimpotantarea()
         drawstation(map)
         drawPowarea()
         inittotalbar('totalbar1',60)
         inittotalbar('totalbar2',30)
         initleidabar()
         initpowerline()
         drawbengzhanline1()
         drawbengzhanline2()
         drawbengliuliangline()
         drawbengyaliline()
    });
    
    
    


// 画区界
function drawPolygons() {
    return
      console.log("dp");
      var district = null;
      var polygons=[];
      var opts = {
          subdistrict: 0,   //获取边界不需要返回下级行政区
          extensions: 'all',  //返回行政区边界坐标组等具体信息
          level: 'district'  //查询行政级别为 市
      }
      district = new AMap.DistrictSearch(opts);
        //行政区查询
        district.setLevel("district")
        var _this = mainvue
        district.search("奉贤区", function(status, result) {
            _this.map.remove(polygons)//清除上次结果
            polygons = [];
            var bounds = result.districtList[0].boundaries;
            if (bounds) {
                for (var i = 0, l = bounds.length; i < l; i++) {
                    //生成行政区划polygon
                    var polygon = new AMap.Polygon({
                        strokeWeight: 2,
                        path: bounds[i],
                        fillOpacity: 0,
                        fillColor: '#80d8ff',
                        strokeColor: '#fee619'
                    });
                    polygons.push(polygon);
                }
            }
            _this.map.add(polygons)
            
      })
    }
    //画泵站
function drawstation(map){
        var lnglats = [
        {lnglats:[121.5745200000,30.9287100000],title:'青村泵站',values:[{value:'0.12m/L',name:'余氯',status:1},{value:'0.11mTU',name:'浊度',status:0},{value:'0.23kpa',name:'压力',status:-1}],path:[[121.565036,30.948329],[121.595248,30.945532],[121.609324,30.931397],[121.58512,30.912842],[121.552676,30.918733]]},
        {lnglats:[121.5068550000,30.9222070000],title:'光明泵站',values:[{value:'0.12m/L',name:'余氯',status:1},{value:'0.11mTU',name:'浊度',status:0},{value:'0.23kpa',name:'压力',status:-1}],path:[[121.541016,30.920366],[121.512177,30.903282],[121.480247,30.915065],[121.484882,30.93038],[121.504452,30.937595]]},
        {lnglats:[121.5065900000,30.8371600000],title:'华亭泵站',values:[{value:'0.12m/L',name:'余氯',status:1},{value:'0.11mTU',name:'浊度',status:0},{value:'0.23kpa',name:'压力',status:1}],path:[[121.488394,30.836497],[121.516031,30.85993],[121.542639,30.842834],[121.500754,30.816154],[121.479811,30.834433]]},
        {lnglats:[121.4590300000,30.9029100000],title:'泰日泵站',values:[{value:'0.12m/L',name:'余氯',status:1},{value:'0.11mTU',name:'浊度',status:0},{value:'0.23kpa',name:'压力',status:-1}],path:[[121.479629,30.914324],[121.470531,30.891052],[121.427273,30.89061],[121.436542,30.914914],[121.465381,30.918301]]},
        {lnglats:[121.7355880000,30.9199410000],title:'平安泵站',values:[{value:'0.12m/L',name:'余氯',status:1},{value:'0.11mTU',name:'浊度',status:0},{value:'0.23kpa',name:'压力',status:-1}],path:[[121.541016,30.920366],[121.512177,30.903282],[121.480247,30.915065],[121.484882,30.93038],[121.504452,30.937595]]},
        {lnglats:[121.4651700000,30.9085800000],title:'育秀泵站',values:[{value:'0.12m/L',name:'余氯',status:1},{value:'0.11mTU',name:'浊度',status:0},{value:'0.23kpa',name:'压力',status:1}],path:[[121.541016,30.920366],[121.512177,30.903282],[121.480247,30.915065],[121.484882,30.93038],[121.504452,30.937595]]},
        {lnglats:[121.46968,30.82875],title:'化工区泵站',values:[{value:'0.12m/L',name:'余氯',status:1},{value:'0.11mTU',name:'浊度',status:0},{value:'0.23kpa',name:'压力',status:-1}],path:[[121.541016,30.920366],[121.512177,30.903282],[121.480247,30.915065],[121.484882,30.93038],[121.504452,30.937595]]},
        {lnglats:[121.429034,30.839162],title:'胡桥泵站',values:[{value:'0.12m/L',name:'余氯',status:1},{value:'0.11mTU',name:'浊度',status:0},{value:'0.23kpa',name:'压力',status:-1}],path:[[121.541016,30.920366],[121.512177,30.903282],[121.480247,30.915065],[121.484882,30.93038],[121.504452,30.937595]]},
        {lnglats:[121.501382,30.977756],title:'金汇泵站',values:[{value:'0.12m/L',name:'余氯',status:1},{value:'0.11mTU',name:'浊度',status:0},{value:'0.23kpa',name:'压力',status:-1}],path:[[121.541016,30.920366],[121.512177,30.903282],[121.480247,30.915065],[121.484882,30.93038],[121.504452,30.937595]]},
        {lnglats:[121.529152,30.861532],title:'钱桥泵站',values:[{value:'0.12m/L',name:'余氯',status:1},{value:'0.11mTU',name:'浊度',status:0},{value:'0.23kpa',name:'压力',status:-1}],path:[[121.541016,30.920366],[121.512177,30.903282],[121.480247,30.915065],[121.484882,30.93038],[121.504452,30.937595]]},
        {lnglats:[121.443647,30.905807],title:'姚家巷泵站',values:[{value:'0.12m/L',name:'余氯',status:1},{value:'0.11mTU',name:'浊度',status:0},{value:'0.23kpa',name:'压力',status:-1}],path:[[121.541016,30.920366],[121.512177,30.903282],[121.480247,30.915065],[121.484882,30.93038],[121.504452,30.937595]]},
        // {lnglats:[121.334957,30.885188],title:'庄行泵站',values:[{value:'0.12m/L',name:'余氯',status:1},{value:'0.11mTU',name:'浊度',status:0},{value:'0.23kpa',name:'压力',status:-1}],path:[[121.541016,30.920366],[121.512177,30.903282],[121.480247,30.915065],[121.484882,30.93038],[121.504452,30.937595]]},
        {lnglats:[121.489208,30.914964],title:'曙光泵站',values:[{value:'0.12m/L',name:'余氯',status:1},{value:'0.11mTU',name:'浊度',status:0},{value:'0.23kpa',name:'压力',status:-1}],path:[[121.541016,30.920366],[121.512177,30.903282],[121.480247,30.915065],[121.484882,30.93038],[121.504452,30.937595]]},
    ];
        for(var i = 0; i<lnglats.length;i++){
            var inhtmid = "markid"+i
            var markerContent = '<div class="marckbox">'
                if(lnglats[i].values[2].status<0){
                   markerContent +='<img class="infoicon" src="images/bengnomoicon.png" /><div class="marckdata"'
                }else{
                    markerContent +='<img class="infoicon" src="images/bengworingicon.gif" /><div class="marckdata"'
                }
               
                markerContent +='<div id="'+inhtmid+'" class="custom-content-marker" style="display: none">' +
                '   <div class="tip">' +lnglats[i].title+'</div>'+
                '   <div class="info">' +lnglats[i].values[0].name+'<span style="color:#fb6e1b">●</span>'+lnglats[i].values[0].value+'</div>'+
                '   <div class="info">' +lnglats[i].values[0].name+'<span style="color:#1b71e6">●</span>'+lnglats[i].values[0].value+'</div>'+
                '   <div class="info">' +lnglats[i].values[0].name+'<span style="color:#1b71e6">●</span>'+lnglats[i].values[0].value+'</div>'+
                '   <div class="close-btn" onclick="clearMarker()"></div>' +
                '</div></div></div>';
        
            var marker = new AMap.Marker({
                position: lnglats[i].lnglats,
                // 将 html 传给 content
                content: markerContent,
                // 以 icon 的 [center bottom] 为原点
                offset: new AMap.Pixel(-13, -30)
            });
        
            // 将 markers 添加到地图
             console.log(map,mainvue.map)
            map.add(marker);
           
            marker.on('mouseover', infoOpen);
        //注释后打开地图时默认关闭信息窗体
        //marker.emit('mouseover', {target: marker});
            marker.on('mouseout', infoClose);
            marker.on('click', newMAp);
            var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
            function infoClose(e) {
                // infoWindow.close(map, e.target.getPosition());
                var str = e.target.B.content.split("id=")
                var ids = "#"+str[1].split(" ")[0]
                ids=ids.replace('"',"");
                ids=ids.replace('"',"");
                //console.log(ids)
                $(ids).hide()
            }
            function infoOpen(e) {
                // infoWindow.setContent(e.target.content);
                // infoWindow.open(map, e.target.getPosition());
                var str = e.target.B.content.split("id=")
                var ids = "#"+str[1].split(" ")[0]
                ids=ids.replace('"',"");
                ids=ids.replace('"',"");
               // console.log(ids)
                $(ids).show()
            }
            function newMAp(e) {
                var str = e.target.B.content.split("id=")
                var ids = "#"+str[1].split(" ")[0]
                ids=ids.replace('"',"");
                ids=ids.replace('"',"");
                mainvue.nowbengid = ids
                mainvue.pagechange(1)
                //$(ids).show()
            }

        }
    // mainvue.lnglats = lnglats;
    // mainvue.changedata();
    }
    
    //画重点客户
var markers;
function drawimpotantarea(){
    markers =[];
        var imortarea = [{lnglats:[121.466945,30.814761],name:"上海化学工业区"},{lnglats:[121.492827,30.922181],name:'上海市奉贤区水务局'}]
        for(var i = 0;i<imortarea.length;i++)
        {
          var label_marker = new AMap.Marker({
                position: imortarea[i].lnglats,
                content: '<img class="infoicon" src="images/vipicon.png" />',
                // icon:'http://fxw.topdemo.xyz/static/img/icon_location.png',
                map: map
            });
                label_marker.setLabel({
                offset: new AMap.Pixel(0, 0),  //设置文本标注偏移量
                content: imortarea[i].name, //设置文本标注内容
                direction: 'top' //设置文本标注方位
            });
             markers.push(label_marker);
        }
       // console.log(markers.length)
}
///热力图
var layer
//[121.565036,30.948329],[121.595248,30.945532],[121.609324,30.931397],[121.58512,30.912842],[121.552676,30.918733]
function drawPowarea(){
    var heatmapData = [
    // {local:[121.565036,30.948329],count:20},
                       // {local:[121.595248,30.945532],count:10},
                  
                        ]
    // for(var i = 0; i<60){
        // if(i<60){
//             
        // }
    // }
    layer = new Loca.HeatmapLayer({
        map: map,
    }); 
     var list = [];
    var i = -1, length = heatmapData.length;
    while (++i < length) {
        var item = heatmapData[i];
        list.push({
            coordinate: [item.lng, item.lat],
            count: item.count
        })
        console.log(item.count)
    }

    layer.setData(list, {
        lnglat: 'coordinate',
        value: 'count'
    });

    layer.setOptions({
        style: {
            radius: 30,
            color: {
                0.5: '#2c7bb6',
                0.65: '#abd9e9',
                0.7: '#ffffbf',
                0.9: '#fde468',
                1.0: '#d7191c'
            }
        }
    });

    layer.render();
}

//页面加载时调用
$(function() {
 var screenw = $(window).width()
 var screenh = $(window).height()
setliqu()////huanxing

////mapthemchange
$("#mapstyleselec").change(function(){
    console.log($("#mapstyleselec").val())
    var styleName = "amap://styles/" + $("#mapstyleselec").val();
      map.setMapStyle(styleName);
});
////左侧图标样式
$('#leftnav').css("height", (screenh-$('#top').height()-20)+'px') 


var runimgwidt = parseInt( screenh *0.8)
/////清水泵站
$('.runviewbox').css("height", runimgwidt+'px') 
var runimgh = parseInt(runimgwidt*1217/706)
$('.runviewbox').css("width", runimgh+'px') 

$('.rundata').css("right", parseInt(runimgh*73/1217)+'px') 
$('.rundata').css("width", parseInt(runimgh*140/1217)+'px')
 
$('.rundata2').css("right", parseInt(runimgh*49/1217)+'px') 
$('.rundata2').css("top", parseInt(runimgh*487/1217)+'px') 
$('.rundata2').css("width", parseInt(runimgh*140/1217)+'px') 

$('.chartcao1').css("height", parseInt(runimgh*215/1217)+'px') 
$('.chartcao1').css("width", parseInt(runimgh*185/1217)+'px') 

$('.caoview h4').css("bottom", parseInt(runimgh*50/1217)+'px') 
$('.caoview').css("top", parseInt(runimgwidt*243/706)+'px') 
$('.one').css("left", parseInt(runimgh*400/1217)+'px') 
$('.two').css("left", parseInt(runimgh*551/1217)+'px') 
// $('.caoview h4').css("width", '100%') 
////阀门1
$('.key1').css("height", parseInt(runimgh*22/1217)+'px') 
$('.key1').css("width", parseInt(runimgh*26/1217)+'px') 
$('.key1').css("left", parseInt(runimgh*407/1217)+'px') 
$('.key1').css("top", parseInt(runimgh*213/1217)+'px') 
///阀门2
$('.key3').css("height", parseInt(runimgh*22/1217)+'px') 
$('.key3').css("width", parseInt(runimgh*26/1217)+'px') 
$('.key3').css("left", parseInt(runimgh*639/1217)+'px') 
$('.key3').css("top", parseInt(runimgh*213/1217)+'px') 
///视屏
$('.show1').css("left", parseInt(runimgh*430/1217)+'px') 
$('.show1').css("top", parseInt(runimgh*547/1217)+'px') 
$('.show2').css("top", parseInt(runimgh*547/1217)+'px') 
$('.show3').css("top", parseInt(runimgh*547/1217)+'px') 
$('.show4').css("top", parseInt(runimgh*547/1217)+'px') 
$('.show5').css("top", parseInt(runimgh*547/1217)+'px') 
$('.show2').css("left", parseInt(runimgh*562/1217)+'px') 
$('.show3').css("left", parseInt(runimgh*675/1217)+'px') 
$('.show4').css("left", parseInt(runimgh*776/1217)+'px') 
$('.show5').css("left", parseInt(runimgh*875/1217)+'px') 

$('.show6').css("top", parseInt(runimgh*213/1217)+'px') 
$('.show6').css("left", parseInt(runimgh*290/1217)+'px') 
$('.show7').css("top", parseInt(runimgh*342/1217)+'px') 
$('.show7').css("left", parseInt(runimgh*963/1217)+'px') 


/////胡桥
var huqiaoredes = parseInt(runimgwidt*1133/817)
$('#huqiaobengzhan').css("height", runimgwidt+'px') 
$('#huqiaobengzhan').css("width", huqiaoredes+'px') 


$('#huqiaobengzhan .caoview').css("top", parseInt(huqiaoredes*575/1133)+'px') 
$('#huqiaobengzhan .one').css("left", (parseInt(huqiaoredes*18/1133))+'px') 
$('#huqiaobengzhan .two').css("left", parseInt(huqiaoredes*576/1133)+'px') 

$('#huqiaocaoruan1').css("left", parseInt(huqiaoredes*139/1133)+'px') 
$('#huqiaocaoruan1').css("top", parseInt(huqiaoredes*470/1133)+'px') 

$('#huqiaocaoruan2').css("left", parseInt(huqiaoredes*410/1133)+'px') 
$('#huqiaocaoruan2').css("top", parseInt(huqiaoredes*705/1133)+'px') 

$('#huqiaocaoruan3').css("left", parseInt(huqiaoredes*700/1133)+'px') 
$('#huqiaocaoruan3').css("top", parseInt(huqiaoredes*550/1133)+'px') 

$('#huaqiaobengdata1').css("left", parseInt(huqiaoredes*355/1133)+'px') 
$('#huaqiaobengdata1').css("top", parseInt(huqiaoredes*255/1133)+'px') 

$('#huaqiaobengdata2').css("left", parseInt(huqiaoredes*426/1133)+'px') 
$('#huaqiaobengdata2').css("top", parseInt(huqiaoredes*255/1133)+'px') 

$('#huaqiaobengdata3').css("left", parseInt(huqiaoredes*497/1133)+'px') 
$('#huaqiaobengdata3').css("top", parseInt(huqiaoredes*255/1133)+'px') 

$('#huaqiaobengdata4').css("left", parseInt(huqiaoredes*570/1133)+'px') 
$('#huaqiaobengdata4').css("top", parseInt(huqiaoredes*255/1133)+'px') 

$('#huqiaoruntopdata').css("right", -parseInt(huqiaoredes*8/1133)+'px') 
$('#huqiaoruntopdata').css("top", parseInt(huqiaoredes*92/1133)+'px') 

$('#huqiaoruntopdata2').css("right", -parseInt(huqiaoredes*8/1133)+'px') 
$('#huqiaoruntopdata2').css("top", parseInt(huqiaoredes*458/1133)+'px') 

$('.huaqiaokey1').css("width", parseInt(huqiaoredes*26/1133)+'px') 
$('.huaqiaokey1').css("height", parseInt(huqiaoredes*23/1133)+'px') 
$('.huaqiaokey1').css("left", parseInt(huqiaoredes*406/1133)+'px') 
$('.huaqiaokey1').css("top", parseInt(huqiaoredes*163/1133)+'px') 

$('.huaqiaokey2').css("width", parseInt(huqiaoredes*26/1133)+'px') 
$('.huaqiaokey2').css("height", parseInt(huqiaoredes*23/1133)+'px') 
$('.huaqiaokey2').css("left", parseInt(huqiaoredes*478/1133)+'px') 
$('.huaqiaokey2').css("top", parseInt(huqiaoredes*163/1133)+'px') 

$('.huaqiaokey3').css("width", parseInt(huqiaoredes*26/1133)+'px') 
$('.huaqiaokey3').css("height", parseInt(huqiaoredes*23/1133)+'px') 
$('.huaqiaokey3').css("left", parseInt(huqiaoredes*547/1133)+'px') 
$('.huaqiaokey3').css("top", parseInt(huqiaoredes*163/1133)+'px') 

$('.huaqiaokey4').css("width", parseInt(huqiaoredes*26/1133)+'px') 
$('.huaqiaokey4').css("height", parseInt(huqiaoredes*23/1133)+'px') 
$('.huaqiaokey4').css("left", parseInt(huqiaoredes*616/1133)+'px') 
$('.huaqiaokey4').css("top", parseInt(huqiaoredes*163/1133)+'px') 


/////曙光
var shuguangredes = parseInt(runimgwidt*1169/847)
$('#shuguangbengzhan').css("height", runimgwidt+'px') 
$('#shuguangbengzhan').css("width", shuguangredes+'px') 


$('#shuguangbengzhan .caoview').css("top", parseInt(shuguangredes*572/1169)+'px') 
$('#shuguangbengzhan .one').css("left", (parseInt(shuguangredes*338/1169))+'px') 
$('#shuguangbengzhan .two').css("left", parseInt(shuguangredes*669/1169)+'px') 

$('#shuguangcaoruan1').css("left", parseInt(shuguangredes*275/1169)+'px') 
$('#shuguangcaoruan1').css("top", parseInt(shuguangredes*553/1169)+'px') 

$('#shuguangcaoruan2').css("left", parseInt(shuguangredes*597/1169)+'px') 
$('#shuguangcaoruan2').css("top", parseInt(shuguangredes*553/1169)+'px') 


$('#shuguangbengdata1').css("left", parseInt(shuguangredes*198/1169)+'px') 
$('#shuguangbengdata1').css("top", parseInt(shuguangredes*234/1169)+'px') 

$('#shuguangbengdata2').css("left", parseInt(shuguangredes*328/1169)+'px') 
$('#shuguangbengdata2').css("top", parseInt(shuguangredes*234/1169)+'px') 

$('#shuguangbengdata3').css("left", parseInt(shuguangredes*433/1169)+'px') 
$('#shuguangbengdata3').css("top", parseInt(shuguangredes*234/1169)+'px') 

$('#shuguangbengdata4').css("left", parseInt(shuguangredes*527/1169)+'px') 
$('#shuguangbengdata4').css("top", parseInt(shuguangredes*234/1169)+'px') 

$('#shuguangbengdata5').css("left", parseInt(shuguangredes*624/1169)+'px') 
$('#shuguangbengdata5').css("top", parseInt(shuguangredes*234/1169)+'px') 

$('#shuguangbengdata6').css("left", parseInt(shuguangredes*720/1169)+'px') 
$('#shuguangbengdata6').css("top", parseInt(shuguangredes*234/1169)+'px') 

$('#shuguangruntopdata').css("right", -parseInt(shuguangredes*8/1169)+'px') 
$('#shuguangruntopdata').css("top", parseInt(shuguangredes*80/1169)+'px') 

$('#shuguangruntopdata2').css("right", parseInt(shuguangredes*125/1169)+'px') 
$('#shuguangruntopdata2').css("top", parseInt(shuguangredes*458/1169)+'px') 

$('.shuguangkey1').css("width", parseInt(shuguangredes*26/1169)+'px') 
$('.shuguangkey1').css("height", parseInt(shuguangredes*23/1169)+'px') 
$('.shuguangkey1').css("left", parseInt(shuguangredes*391/1169)+'px') 
$('.shuguangkey1').css("top", parseInt(shuguangredes*785/1169)+'px') 

$('.shuguangkey2').css("width", parseInt(shuguangredes*26/1169)+'px') 
$('.shuguangkey2').css("height", parseInt(shuguangredes*23/1169)+'px') 
$('.shuguangkey2').css("left", parseInt(shuguangredes*725/1169)+'px') 
$('.shuguangkey2').css("top", parseInt(shuguangredes*785/1169)+'px') 



caodraw('huqiaocaoone',0.5,parseInt(shuguangredes*283/1133),parseInt(shuguangredes*152/1133))
caodraw('huqiaocaotwo',0.5,parseInt(shuguangredes*283/1133),parseInt(shuguangredes*152/1133))
caodraw('zhuliucao1',0.5,parseInt(runimgh*138/1217),parseInt(runimgh*131/1217))
caodraw('zhuliucao2',0.5,parseInt(runimgh*138/1217),parseInt(runimgh*131/1217))

caodraw('shuguangcaoone',0.5,parseInt(shuguangredes*146/1169),parseInt(shuguangredes*207/1169))
caodraw('shuguangcaotwo',0.5,parseInt(shuguangredes*146/1169),parseInt(shuguangredes*207/1169))

/////日期选择器绑定
//一次绑定多个选择
    var jel = document.querySelectorAll(".moredate");
    for(var j=0;j<jel.length;j++){
       // var mat = jel[j].getAttribute("placeholder");
        jeDate(jel[j],{
            format: "YYYY年MM月DD日"//mat
        });
    }
    animation()
    
})
///园圈进度
function setliqu(){
     var containers = document.getElementsByClassName('chart');
            var options = {
                series: [{
                    type: 'liquidFill',
                    data: [0.2, {
                        value: 0.2,
                        direction: 'left'
                    }, 0.1, {
                        value: 0.1,
                        direction: 'left'
                    }],
                    radius: '80%',
                    backgroundStyle: {
                       // borderWidth: 5, //内边框宽度
                        //borderColor: 'yellow', //背景内边框
                        color: '#021241', //背景颜色
                       // shadowColor: 'red', //阴影
                       // shadowBlur: 10, //阴影模糊
                    },
                    outline: {
                        show: true,
                        borderDistance: 2, //边框距离
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: '#1a9ad9',
                            shadowBlur: 10,
                            shadowColor: '#02224d'
                        }
                    },
                    label: { //To change the text, you may use label.formatter, which can be set to a string or function.
                        normal: {
                           // formatter: '{a}\n{b}\nValue: {c}', //If it is a string, {a} series name, {b} data name,{c} data value.
                            textStyle: {
                                color: '#ffa911', //波浪上文本颜色
                              //  insideColor: 'yellow', //波浪内部字体颜色
                              //  fontSize: 30
                            },
                          //  position: ['30%', '50%'], //Text position is at the center by default. label.position can be set to be 'inside', 'left', 'right', 'top', 'bottom', or horizontal and vertical positions like ['10%', '20%'], which means '10%' to the left (controlled by label.align, which can be 'left', 'center', or 'right') and '20%' to the top (controlled by label.baseline, which can be 'top', 'middle', or 'bottom').
                            // position:'top'
                            // align: 'center',
                            // baseline: 'center'
         
                        }
                    }
                    
                }]
          
            };

            var charts = [];
            var chart = echarts.init(containers[0]);

              
                chart.setOption(options);
                chart.setOption({
                    baseOption: options,
                    media: [{
                        query: {
                            maxWidth: 300
                        },
                        option: {
                            series: [{
                                label: {
                                    fontSize: 26
                                }
                            }]
                        }
                    }]
                });

                charts.push(chart);
}
///水曹
function caodraw(key,value,w,h){
   // w+=100;
    var containers = document.getElementById(key);
    //var objHtml = document.getElementById("qushizhexian");
     console.log(w,h)
    containers.style.width = w + "px";
    containers.style.height = h + "px";
   
            // var options = [{
                // series: [{
                    // type: 'liquidFill',
                    // data: [0.6, 0.5, 0.4, 0.3],
                    // radius: '100%',
// 
                    // backgroundStyle: {
                        // borderWidth: 2,
                        // borderColor: '#156ACF'
                    // },
                    // outline: {
                        // show: false
                    // },
                    // shape: 'rect'
                // }]
            // },{
            // series: [{
                    // type: 'liquidFill',
                    // data: [0.8, 0.6, 0.5, 0.4],
                    // radius: '100%',
// 
                    // backgroundStyle: {
                        // borderWidth: 2,
                        // borderColor: '#156ACF'
                    // },
                    // outline: {
                        // show: false
                    // },
                    // shape: 'rect'
                // }]
            // }
            // ];
option = {
    series: [{
        type: 'liquidFill',
        data: [0.2, 0.15, 0.12, 0.1],
        shape: 'container',
        outline: {
            show: false
        },
         backgroundStyle: {
           borderWidth: 4,
           borderColor: '#dadddb',//边框颜色
           color: '#67799b',///背景颜色
          },
    }]
};
            var charts = [];
            var chart = echarts.init(containers); 
                chart.setOption(option);
                chart.setOption({
                    baseOption: option,
                    media: [{
                        query: {
                           // maxWidth: 300
                        },
                        option: {
                            series: [{
                                label: {
                                    // fontSize: 12
                                    show: false
                                }
                            }]
                        }
                    }]
                });

                charts.push(chart);
          //  }
}
/////供水范围
var heatmapData=[]
var heatmaparr=[]
var heatmapOptarr=[]
function drawheatmap(obj){
    for(let i=5;i>0;i--){
            for(var times=0; times<60; times++) {
                var hudu = (2*Math.PI / 360) * 6 * times;
                var x = obj.a + Math.sin(hudu) * obj.r;
                // 注意此处是“-”号，因为我们要得到的Y是相对于（0,0）而言的。
                var y = obj.b - Math.cos(hudu) * obj.r;
                var xy={}
                xy['lng']=x
                xy['lat']=y
                xy['count']=i
                heatmapData.push(xy)

            }
        }
   var heatmapOpts = {
        //3d 相关的参数
        '3d': {
            //热度转高度的曲线控制参数，可以利用左侧的控制面板获取
            heightBezier: [0.4, 0.2, 0.4, 0.8],
            //取样精度，值越小，曲面效果越精细，但同时性能消耗越大
            gridSize: 2,
            heightScale: 1
        }
    };
    heatmapOptarr.push(heatmapOpts)
   //初始化heatmap对象
    var heatmap = new AMap.Heatmap(map, heatmapOpts);
    heatmaparr.push(heatmap)
    heatmap.setDataSet({
        data: heatmapData,
        max: 100
    });
}

/////趋势折线图
function qushiview(){
    
     var objHtml = document.getElementById("qushizhexian");
      var screenw = $(window).width()
        var screenh = $(window).height()
    objHtml.style.width = screenw*0.8 + "px";
    objHtml.style.height = screenh*0.7 + "px";
    var totalScoreCount = echarts.init(objHtml);
    option = {
    backgroundColor: '',
    // title: {
        // text: '',
        // textStyle: {
            // fontWeight: 'normal',
            // fontSize: 16,
            // color: '#F1F1F3'
        // },
        // left: 2,
        // top:3,
    // },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            lineStyle: {
                color: '#57617B'
            }
        }
    },
    legend: {
        icon: 'rect',
        itemWidth: 14,
        itemHeight: 5,
        itemGap: 13,
        data: ['朱柳河泵站/进水浊度', '石家浜泵站/进水浊度', '八毛朱泵站/进水浊度'],
        right: '4%',
        textStyle: {
            fontSize: 12,
            color: '#F1F1F3'
        }
    },
    grid: {
        top:'10%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        boundaryGap: false,
        axisLine: {
            lineStyle: {
                color: '#fff'
            }
        },
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    }],
    yAxis: [{
        type: 'value',
        axisTick: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#fff'
            },
            "show":false
        },
        axisLabel: {
            margin: 10,
            textStyle: {
                fontSize: 14
            }
        },
        splitLine: {
            lineStyle: {
                color: '#fff'
            }
        }
    }],
    series: [{
        name: '石家浜泵站/进水浊度',
        type: 'line',
        smooth: true,
        lineStyle: {
            normal: {
                width: 1
            }
        },
        // areaStyle: {
            // normal: {
                // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    // offset: 0,
                    // color: 'rgba(137, 189, 27, 0.3)'
                // }, {
                    // offset: 0.8,
                    // color: 'rgba(137, 189, 27, 0)'
                // }], false),
                // shadowColor: 'rgba(0, 0, 0, 0.1)',
                // shadowBlur: 10
            // },
            // "show":false
        // },
        itemStyle: {
            normal: {
                color: 'rgb(137,189,27)'
            }
        },
        data: [96.3,96.4,97.5,95.6,98.1,94.8,89.6,94.1,80.1,52.4,75.8,94.7]
    }, {
        name: '朱柳河泵站/进水浊度',
        type: 'line',
        smooth: true,
        lineStyle: {
            normal: {
                width: 1
            }
        },
      //  areaStyle: {
            // normal: {
                // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    // offset: 0,
                    // color: 'rgba(0, 136, 212, 0.3)'
                // }, {
                    // offset: 0.8,
                    // color: 'rgba(0, 136, 212, 0)'
                // }], false),
                // shadowColor: 'rgba(0, 0, 0, 0.1)',
                // shadowBlur: 10
            // },
            // "show":false
       // },
        itemStyle: {
            normal: {
                color: 'rgb(0,136,212)'
            }
        },
        data: [97.3,99.2,99.3,100.0,99.6,90.6,80.0,91.5,69.8,67.5,90.4,84.9]
    }, {
        name: '八毛朱泵站/进水浊度',
        type: 'line',
        smooth: true,
        lineStyle: {
            normal: {
                width: 1
            }
        },
       // areaStyle: {
            // normal: {
                // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    // offset: 0,
                    // color: 'rgba(219, 50, 51, 0.3)'
                // }, {
                    // offset: 0.8,
                    // color: 'rgba(219, 50, 51, 0)'
                // }], false),
                // shadowColor: 'rgba(0, 0, 0, 0.1)',
                // shadowBlur: 10
            // },
            // "show":false
       // },
        itemStyle: {
            normal: {
                color: 'rgb(219,50,51)'
            }
        },
        data: [84.2,81.0,67.5,72.1,43.7,88.5,91.9,101.8,79.7,87.6,92.9,0]
        }, ]
    };
    totalScoreCount.setOption(option);
}
